<template>
  <div class="pg-login">
    <div class="login-img">
      <img class="login-logo" src="../assets/logo/logo-w.png">
    </div>
    <div class="form-box">
      <el-form ref="loginForm" class="login-form" label-position="top" :model="loginForm" :rules="loginRules">
        <div class="login-title">欢迎登录</div>
        <el-form-item label="账号：" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入账号" @keyup.enter.native="handleLogin">
            <i slot="prefix" class="iconfont fonticon-user1 el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" @keyup.enter.native="handleLogin">
            <i slot="prefix" class="iconfont fonticon-lock el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item label="验证码：" prop="code" v-if="captchaEnabled">
          <el-input
            v-model="loginForm.code"
            placeholder="验证码"
            @keyup.enter.native="handleLogin">
            <i slot="prefix" class="iconfont fonticon-valid-code el-input__icon input-icon" />
            <div slot="append" class="login-code">
              <img class="login-code-img" :src="codeUrl" @click="getCode" />
            </div>
          </el-input>
        </el-form-item>
        <el-checkbox class="remember-check mb20" v-model="loginForm.rememberMe">记住密码</el-checkbox>
        <el-form-item>
          <el-button class="login-btn" :loading="loading" type="primary" @click.native.prevent="handleLogin">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
          <div style="float: right;" v-if="register">
            <router-link class="link-type" :to="'/register'">立即注册</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
import { encrypt, decrypt } from '@/utils/jsencrypt';
import { getCodeImg } from '@/api/login';

export default {
  name: 'Login',
  data () {
    return {
      title: process.env.VUE_APP_TITLE,
      codeUrl: '',
      loginForm: {
        username: 'admin',
        password: 'admin123',
        rememberMe: false,
        code: '',
        uuid: ''
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入您的账号' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '请输入您的密码' }
        ],
        code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
      },
      loading: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: false,
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.getCode();
    this.getCookie();
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = 'data:image/gif;base64,' + res.img;
          this.loginForm.uuid = res.uuid;
        };
      });
    },
    /**
      * @date 2025/07/02
      * @author wolfMan
      * @description {获取本地存储的表单信息自动填充}
    */
    getCookie() {
      const username = Cookies.get('username');
      const password = Cookies.get('password');
      const rememberMe = Cookies.get('rememberMe');
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    /**
      * @date 2025/07/02
      * @author wolfMan
      * @description {登录}
    */
    handleLogin () {
      this.$refs['loginForm'].validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set('username', this.loginForm.username, { expires: 30 });
            Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
          } else {
            Cookies.remove('username');
            Cookies.remove('password');
            Cookies.remove('rememberMe');
          };
          this.$store.dispatch('loginAction', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' }).catch(() => {});
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            };
          });
        };
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.pg-login {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-width: 1200px;
  min-height: 560px;
  .login-img {
    flex: 1;
    min-width: 0;
    padding-top: 40px;
    padding-left: 20px;
    height: 100%;
    line-height: 0;
    background-image: url("../assets/images/login-img.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .login-logo {
      width: 226px;
    }
  }
  .form-box {
    display: flex;
    flex-direction: column;
    width: 36%;
    line-height: 0;
    .login-title {
      padding-bottom: 34px;
      line-height: 56px;
      text-align: left;
      color: #1677ff;
      font-size: 40px;
      font-weight: 700;
    }
    .login-form {
      padding: 12px 45px;
      margin: auto;
      width: 466px;
      line-height: 0;
      box-sizing: border-box;
      ::v-deep .el-form-item {
        &__label {
          padding-bottom: 0;
          margin-bottom: 8px;
          line-height: 22px;
          color: #515a6e;
          font-size: 16px;
          font-weight: 400;
        }
        .el-input {
          overflow: hidden;
          &__prefix {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding-left: 5px;
            .iconfont {
              width: 26px;
              height: 26px;
              line-height: 26px;
              color: #515152;
              font-size: 26px;
            }
          }
          &__inner {
            padding-left: 50px;
            height: 45px;
            line-height: 25px;
            border-color: #dbdff1;
            border-radius: 4px;
            color: #515a6e;
            font-size: 16px;
            font-family: "open sans","Helvetica Neue", Helvetica, Arial, sans-serif;
          }
          &-group {
            width: 100%;
            &__append {
              padding: 0;
            }
            .el-input__inner {
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
            }
          }
          .login-code {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            width: 135px;
            height: 43px;
            line-height: 0;
            .login-code-img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .login-btn {
        padding: 14px 16px;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100%;
        line-height: 30px;
        border: none;
        color: #fff;
        font-size: 20px;
        font-weight: 600;
      }
    }
  }
}
</style>